@keyframes speakUp {
	0% {
		transform: translateY(0);
		opacity: 1;
	}

	80% {
		transform: translateY(-120rpx);
		opacity: .9;
	}

	100% {
		transform: translateY(-180rpx);
		opacity: 0;
	}
}
@keyframes floatUp {
	0% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}

	100% {
		transform: translateY(-400rpx) scale(0.8);
		opacity: 0;
	}
}
@keyframes chatScroll {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-100%);
	}
}
/* 向左滑出动画 */
@keyframes slideOutLeft {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}
/* 红包弹窗动画 */
@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}
@keyframes bounceIn {
	0% {
		transform: scale(0.3);
		opacity: 0;
		transform-origin: center;
	}

	50% {
		transform: scale(1.1);
		opacity: 0.9;
	}

	70% {
		transform: scale(0.9);
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes newMessageSlide {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-.66667rem)
    }

    5% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }

    98% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }

    99% {
        opacity: 0;
        -webkit-transform: translateX(0)
    }

    to {
        opacity: 0;
        -webkit-transform: translateX(-6.66667rem)
    }
}

.live-container {
	width: 100%;
	height: 100vh;
	background:url(@/static/img/bg.jpg) center center / cover no-repeat;
	position: relative;
	.position {
		position: fixed;
		left: 20px;
		top: 70px;
		font-size: 13px;
		.card {
			position: relative;
			width: max-content;
			max-width: 300px;
			min-width: 100px;
			padding: 10rpx;
			background: rgba(255, 255, 255, 0.8);
			border-radius: 10px;
			margin-bottom: 20rpx;
			.box {
				width: 100%;
				max-height: 100px;
				overflow: auto;
			}
	
			.list {
				padding-bottom: 10rpx;
				font-size: 28rpx;
				line-height: 32rpx;
				color: #444;
				margin-top: 10rpx;
			}
	
			.font {
				color: #fb6002;
				font-size: 30rpx;
				line-height: 32rpx;
				font-weight: bold;
			}
		}
	}
	
	
	.video-container {
		width: 100%;
		height: 100vh;
		position: relative;
		.video-player {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.play {
			display: inline-block;
			width: 50px;
			height: 50px;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -25px;
			margin-top: -25px;
			z-index: 100;
	
			image {
				width: 50px;
				height: 50px;
			}
		}
	
		.videoLoading {
			position: absolute;
			text-align: center;
			width: 100%;
			color: #fff;
			font-size: 14px;
			line-height: 32px;
			left: 0;
			top: 200px;
			z-index: 1000;
		}
	
		.videoError {
			position: absolute;
			inset: 0px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgb(0 0 0 /0.7);
	
			.videoErrorBox {
				color: #fff;
				font-size: 14px;
				text-align: center;
				padding: 16px;
	
				.veIcon {
					color: #f00;
					font-size: 24px;
					margin-bottom: 12px;
				}
	
				.veBtn {
					padding: 0 16px;
					background: #007AFF;
	
					:hover {
						background: #007AFF;
					}
	
					border-radius: 23px;
					color: #fff;
				}
			}
		}
	}
	
	.user-info {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 20rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		.user-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			overflow: hidden;
			.avatar-img {
				width: 100%;
				height: 100%;
			}
		}
		.user-details {
			display: flex;
			flex-direction: column;
			gap: 8rpx;
			.username {
				color: #fff;
				font-size: 28rpx;
				font-weight: 600;
			}
			.follower-count {
				color: #ccc;
				font-size: 24rpx;
			}
		}
		.follow-btn {
			width: 60rpx;
			height: 60rpx;
			background-color: #007AFF;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			.follow-icon {
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
	
	.close-btn {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 80rpx;
		height: 80rpx;
		background-color: rgba(0, 0, 0, 0.8);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		.close-icon {
			color: #fff;
			font-size: 40rpx;
			font-weight: bold;
		}
	}
	.floating-hearts {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;

		image {
			width: 40rpx;
		}
		.heart {
			position: absolute;
			bottom: 200rpx;
			font-size: 40rpx;
			animation: floatUp 3s ease-out forwards;
		}
	}

	/* 发言浮层动画 */
	.speak-float-layer {
		position: absolute;
		left: 40rpx;
		right: 40rpx;
		bottom: 460rpx;
		z-index: 5;
		.speak-float-item {
			display: inline-flex;
			align-items: center;
			background-color: rgba(0, 0, 0, .6);
			border-radius: 20rpx;
			padding: 12rpx 18rpx;
			margin-top: 12rpx;
			animation: speakUp 2.5s ease-out forwards;
		}
		.chat-username {
			color: #29daec;
			font-size: 24rpx;
			font-weight: 600;
			margin-right: 16rpx;
			line-height: 30rpx;
		}
		
		.chat-content {
			color: #fff;
			font-size: 24rpx;
			line-height: 30rpx;
		}
	}
	.chat-area {
		position: absolute;
		bottom: 132rpx;
		left: 40rpx;
		right: 40rpx;
		max-height: 300rpx;
		width: 100vw;
		overflow: auto;
		pointer-events: auto;
		overflow-y: scroll;
		.chat-container {
			display: flex;
			flex-direction: column-reverse;
			//animation: chatScroll 20s linear infinite;
			&.paused {
				animation-play-state: paused;
			}
			.chat-bubble {
				background-color: rgba(0, 0, 0, 0.3);
				border-radius: 12rpx;
				margin-bottom: 16rpx;
				max-width: 60%;
				width: max-content;
				padding: 10rpx 20rpx 5rpx 10rpx;
				transform: translateX(40px);
				-webkit-transform: translateX(40px);
				
				animation: comeIn 0.3s 1;
				-webkit-animation: comeIn 0.3s 1;
				-webkit-animation-fill-mode: forwards;
				.speak {
					position: relative;
					box-sizing: border-box;
					padding-left: 50rpx;
					
					.avatar {
						position: absolute;
						left: 0;
						top: 0;
						border-radius: 50%;
						vertical-align: top;
						width: 40rpx;
						height: 40rpx;
						overflow: hidden;
						margin-right: 10rpx;
					}
					.chat-username {
						color: #29daec;
						font-size: 24rpx;
						font-weight: 600;
						margin-right: 16rpx;
						line-height: 40rpx;
					}
					
					.chat-content {
						color: #fff;
						font-size: 24rpx;
						line-height: 40rpx;
					}
				}
			
				
			}
			.red_claim{
				animation: slideOutLeft 0.3s ease-out forwards;
			}
			.order {
				.chat-content {
					color: #ffed05 !important;
					font-weight: bold;
				}
			}
		}
		.chat-hint {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: rgba(0, 0, 0, 0.8);
			border-radius: 20rpx;
			padding: 20rpx 40rpx;
			z-index: 10;
			.hint-text {
				color: #fff;
				font-size: 24rpx;
				font-weight: 500;
			}
		}
	}
	//橱窗
	.red_showcase{
		position: fixed;
		top: 200px;
		right: 10px;
		width: 160rpx;
		height: 160rpx;
		image{
			width: 100%;
			height: 100%;
		}
		.rp-close {
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			z-index: 200;
			.close{
				width: 20rpx;
				height: 20rpx;
			}
		}
		.openRed{
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			height: 80%;
			display: inline-block;
		}
	}

	/* 红包弹窗样式 */
	.rp-mask {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, .6);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
		animation: fadeIn 0.3s ease-out;
		.rp-dialog {
			position: relative;
			width: 66%;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			animation: bounceIn 0.5s ease-out;
			padding-top: 40rpx;
			.time{
				position: absolute;
				right: 0;
				top: 0;
				color: #fff;
				background: rgba(0, 0, 0, .4);
				padding: 0 20rpx;
				font-size: 24rpx;
				line-height: 40rpx;
				border-top-right-radius: 6rpx;
				border-top-left-radius: 6rpx;
			}
			.rp-close {
				position: absolute;
				right: 26rpx;
				top: 60rpx;
				color: #fff;
				font-size: 46rpx;
				z-index: 200;
				.close{
					width: 20rpx;
					height: 20rpx;
				}
			}
			.openRed{
				position: absolute;
				left: 0;
				bottom: 0;
				right: 0;
				height: 65%;
				display: inline-block;
			}
			.img{
				width: 100%;
				height: auto;
			}
		}
	}
	/*飘窗*/
	.bay-window{
		width: auto;
		display: inline-block;
		position: fixed;
		left: 0;
		top: 260rpx;
		right: 0;
		.box{
			height: auto;
			overflow: hidden;
			.animation{
				width: auto;
				display: inline-block;
				height: auto;
				overflow: hidden;
				justify-content: flex-start;
				background: linear-gradient(90deg,#ff963b,transparent);
				border-radius: 60rpx;
				padding: 8rpx;
				padding-right: 60rpx;
				margin-left: 30rpx;
				margin-bottom: 15rpx;
				-webkit-animation: fadeInLeft 2.4s linear .2s both;
				-moz-animation: fadeInLeft 2.4s linear .2s both;
				animation: fadeInLeft 2.4s linear .2s both;
				line-height: 1;
				.avatar {
				    width: 60rpx;
				    height: 60rpx;
				    border-radius: 100%;
				    margin-right: 8rpx;
					display:inline-block;
				}
				.info {
				    text-align: left;
				    font-size: 22rpx;
					color: #fff;
					display: inline-block;
					padding-top: 5rpx;
					.name {
					    font-size: 24rpx;
						.n{
							font-weight: bold;
							margin-right: 5rpx;
						}
					}
					.title{
					    margin-top: 8rpx;
					}
				}
			}
		}
	}
	/* 体验营弹窗样式 */
	.exp-mask {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, .55);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
		image {
			position: relative;
			width: 100%;
		}
		.exp-dialog {
			position: absolute;
			top: 50%;
			left: 50%;
			max-height: 80vh;
			z-index: 3;
			width: 90%;
			display: flex;
			align-items: center;
			justify-content: center;
			transform: translate(-50%,-50%);
			overflow: auto;
			.exp-close {
				position: absolute;
				right: 10px;
				top: 10px;
				color: #999;
				font-size: 18px;
				z-index: 9;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30px;
				height: 30px;
				background: rgba(0,0,0,0.5);
				border-radius: 50%;
			}
		}
		.exp-footer {
			display: flex;
			align-items: center;
			justify-content: space-between
		}
		.exp-btn {
			background: linear-gradient(135deg, #ff6b35, #f7931e);
			color: #fff;
			border-radius: 999rpx;
			padding: 0 28rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			margin: 0;
		}
	}
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 40rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		.input-area {
			flex: 1;
			height: 100%;
			background-color: rgba(0,0,0,.5);
			border-radius: 50rpx;
			padding: 10rpx 30rpx;
			color: #fff;
			.sendInput {
				width: 100%;
				height: 100%;
				color: #fff;
			}
		}
		.input-placeholder {
			color: #fff;
			font-size: 28rpx;
		}
		.action-buttons {
			display: flex;
			gap: 20rpx;
			.action-btn {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;
				background-color: rgba(0,0,0,.5);
				&:active {
					transform: scale(0.9);
				}
				image {
					width: 70%;
					height: 70%;
				}
			}
			.share-btn {
				background-color: rgba(255, 255, 255, 0.2);
			}
		}
		
	}

	.scheduled-time{
		position: fixed;
		width: 460rpx;
		height: 460rpx;
		background:url(@/static/img/time.png) center center / cover no-repeat;
		left: 50%;
		top: 50%;
		margin-top: -230rpx;
		margin-left: -230rpx;
		text-align: center;
		.tn{
			color: #ffebcc;
			font-size: 32rpx;
			line-height: 40rpx;
			margin-top: 150rpx;
		}
		.tm{
			color: #ffebcc;
			font-weight: bold;
			font-size: 74rpx;
			line-height: 80rpx;
			margin-top: 30rpx;
		}
	}
	.refresh{
		background: rgba(0,0,0,.4);
		height: 52rpx;
		line-height: 52rpx;
		color: #fff;
		opacity: 0.7;
		border-radius: 26rpx;
		padding: 0 30rpx;
		position: fixed;
		right: 30rpx;
		top: 60rpx;
	}
	.popup-pay{
		height: auto;
		overflow: hidden;
		position: relative;
		padding:30rpx 40rpx;
		.close{
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}
		.top{
			height: auto;
			overflow: hidden;
			font-size: 32rpx;
			line-height: 56rpx;
			color: #333;
		}
		.radio{
			height: auto;
			overflow: hidden;
			margin-top: 40rpx;
			.df{
				height: auto;
				overflow: hidden;
				display: flex;
				flex-direction: row;
				background:url(@/static/img/sel.png) center right no-repeat;
				background-size: 38rpx 38rpx;
				margin-bottom: 40rpx;
				&.on{
					background:url(@/static/img/onSel.png) center right no-repeat;
					background-size: 38rpx 38rpx;
				}
				.icon{
					width: 42rpx;
					height: 42rpx;
					margin-right: 20rpx;
					margin-top: 7rpx;
				}
				.title{
					font-size: 32rpx;
					line-height: 56rpx;
					color: #333;
					flex: 1;
				}
				
			}
			.tips{
				height: auto;
				font-size: 28rpx;
				color: #999;
				line-height: 36rpx;
				text-align: justify;
			}
		}
		.popupFooter{
			height: 90rpx;
			display: flex;
			flex-direction: row;
			margin-top: 50rpx;
			.info{
				height: auto;
				overflow: hidden;
				flex: 1;
				font-size: 24rpx;
				color: #888;
				.label,.original{
					line-height: 42rpx;
					margin-top: 30rpx;
					display: inline-block;
					vertical-align: top;
				}
				.original{
					text-decoration-line: line-through;
				}
				.price{
					font-size: 50rpx;
					color: #F53D19;
					line-height: 90rpx;
					display: inline-block;
					vertical-align: top;
					margin-right: 10rpx;
				}
			}
			.btn{
				width: 220rpx;
				text-align: center;
				font-size: 32rpx;
				color: #fff;
				line-height: 90rpx;
				background: #F53D19;
				cursor: pointer;
			}
		}
		
	}
}
@keyframes comeIn{
	0%{
		opacity: 0;
		transform: translateX(40px);
		-webkit-transform: translateX(40px);
	}
	100%{
		opacity: 1s;
		transform: translateX(0);
		-webkit-transform: translateX(0);
	}
}